<template>
  <el-dialog
    title="用户详情"
    @close="close"
    :visible.sync="dialogVisible">

    <el-form :inline="true">
      <el-card>
        <el-divider style="font-weight:bold; background-color:#f4f4f5">基础信息</el-divider>
        <el-row>
          <el-col :span="12">
            <div>
              <el-form-item label="用户头像:">
                <div class="demo-image">
                  <div class="block">
                    <img style="width: 100px; height: 100px;object-fit: cover" :src="user.avatar"></img>
                  </div>
                </div>
              </el-form-item>
            </div>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="12">
            <div>
              <el-form-item label="用户编号:">
                <span>{{ user.id }}</span>
              </el-form-item>
            </div>
          </el-col>
          <el-col :span="12">
            <div>
              <el-form-item label="用户类型:">
                <template slot-scope="scope">
                  <el-tag v-if="user.teacher === 1" effect="plain">讲师</el-tag>
                  <el-tag v-if="user.teacher === 0" effect="plain">用户</el-tag>
                </template>
              </el-form-item>
            </div>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="12">
            <div>
              <el-form-item label="手机号:">
                <span>{{ user.mobile }}</span>
              </el-form-item>
            </div>
          </el-col>
          <el-col :span="12">
            <div>
              <el-form-item label="昵称:">
                <span>{{ user.nickname }}</span>
              </el-form-item>
            </div>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="12">
            <div>
              <el-form-item label="注册时间:">
                <span>{{user.gmtCreate}}</span>
              </el-form-item>
            </div>
          </el-col>
          <el-col :span="12">
            <div>
              <el-form-item label="状态:">
                <template slot-scope="scope">
                  <el-tag v-if="user.status === 0" effect="plain" type="success">正常</el-tag>
                  <el-tag v-if="user.status === 1" effect="plain" type="danger">禁用</el-tag>
                </template>
              </el-form-item>
            </div>
          </el-col>
        </el-row>
      </el-card>
    </el-form>

    <div slot="footer" class="dialog-footer">
      <el-button type="primary" @click="close">确定</el-button>
    </div>

  </el-dialog>
</template>

<script>
  import { getUserById } from '@/api/user'

  export default {
    data() {
      return {
        dialogVisible: false,
        user: {}
      }
    },
    methods: {
      open(userId) {
        this.dialogVisible = true
        if (userId) {
          this.user.id = userId
          getUserById(userId).then(result => {
            this.user = result.data.item
          })
        }
      },

      close() {
        this.dialogVisible = false
        // 重置表单
        this.resetForm()
      },

      resetForm() {
        this.user = {}
      },
    }
  }
</script>

<style scoped>

</style>
